<!--建立考核模板首页 -->
<template>
  <div>
    <div style="height: 700px; margin: 25px">
      <div style="display:flex;justify-content:space-between">
        <!-- 考核模板 -->
        <el-row class="createMUban">
          <el-upload
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            action
            :before-upload="beforeUpload"
            :on-success="successBtn"
          >
            <el-button
              style="
           background-color: #3B95FF;
           color: #fff;
       border-radius:4px;
      margin-bottom: 10px;
      padding:8px 20px;
      "
            >
              <img
                src="../../assets/kaohePng/onLoading.png"
                style="vertical-align: middle; margin-top:-5px;"
              />
              <span>上传部门考核</span>
            </el-button>
          </el-upload>

          <!-- </el-upload> -->
          <el-button
            @click="downloadTemplate()"
            style="
           background-color: #47B882;
           margin-left:10px;
           color: #fff;
       border-radius:4px;
      margin-bottom: 10px;
      padding:8px 20px;
      "
          >
            <img
              src="../../assets/kaohePng/xiazai.png"
              style="vertical-align: middle; margin-top:-5px;"
            />
            <span>下载考核模板</span>
          </el-button>

          <el-button
            @click="deleteSelected()"
            style="
           background-color: #E86565;
           color: #fff;
       border-radius:4px;
       padding:8px 20px;
      margin-bottom: 10px;
      "
            :disabled="deletes"
          >批量删除</el-button>
        </el-row>
        <!-- 查询搜索 -->
        <el-row>
          <el-form style="display:flex;">
            <el-form-item label="年度">
              <el-date-picker
                style="width:75%;height:32px;"
                type="year"
                value-format="yyyy"
                format="yyyy年"
                v-model="ruleForm1.nowtime"
                placeholder="请选择"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="部门">
              <el-select
                clearable
                style="width:75%;height:32px;"
                v-model="ruleForm1.assessAdministratorUserId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in this.departments"
                  :key="item.id"
                  :label="item.departmentName"
                  :value="item.departmentName"
                ></el-option>
              </el-select>
              <!-- <el-cascader
                :show-all-levels="false"
                style="width:51%;height:32px;"
                placeholder="请选择"
                ref="selectUpResId"
                :options="this.departments"
                v-model="ruleForm1.assessAdministratorUserId"
              ></el-cascader>-->
            </el-form-item>
            <!--   @click="sousuo" -->
            <el-button
              @click="sousuo()"
              type="primary"
              style="height:32px; padding:8px 20px;margin-top:4px"
            >搜索</el-button>
          </el-form>
        </el-row>
      </div>
      <!-- 表格信息 -->
      <el-row v-if="!looks">
        <el-table
          :data="tableData"
          style="width: 100%; color: #333333;font-size: 14px"
          height="700"
          align="center"
          :header-cell-style="{ background: '#ECF1F9' }"
          @selection-change="handleSelectionChangeDepartment"
        >
          <el-table-column type="selection" width="80" align="center"></el-table-column>
          <el-table-column fixed prop="ranking" align="center" label="排名" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.ranking==1">
                <img class="manImg" src="../../assets/kaohePng/one.png" alt />
              </span>
              <span v-if="scope.row.ranking==2">
                <img class="manImg" src="../../assets/kaohePng/two.png" alt />
              </span>
              <span v-if="scope.row.ranking==3">
                <img class="manImg" src="../../assets/kaohePng/three.png" alt />
              </span>
              <span v-else class="no">{{scope.row.ranking>3?scope.row.ranking : ''}}</span>
              <!-- <span
                class="index_common"
                :class="[scope.row.ranking == '1' ? 'index_one' : scope.row.ranking== '2' ? 'index_two' : scope.row.ranking== '3' ? 'index_three' : '']"
              >{{ scope.row.ranking }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" align="center" label="部门"></el-table-column>
          <el-table-column prop="score" align="center" label="分数" width="120"></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称"></el-table-column>
          <el-table-column prop="year" align="center" label="年度"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="color: #3B95FF"
                @click.native.prevent="editRow(scope.row)"
              >编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="text"
                size="small"
                style="color:#E86565"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-pagination
            style="text-align: right;margin-top:16px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-row>
    </div>
    <!-- 模板弹层查看与填写 -->
    <el-dialog :append-to-body="true" title="部门考核数据" :visible.sync="addTarget" width="26%">
      <el-form
        @close="closeTargets('ruleForm')"
        label-position="right"
        :model="departmentList"
        ref="departmentList"
        style="margin-left: 35px"
      >
        <el-form-item label="排名" :label-width="formLabelWidth">
          <el-input style="width:70%" v-model="departmentList.ranking" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-input style="width:70%" v-model="departmentList.departmentName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="分数" :label-width="formLabelWidth">
          <el-input style="width:70%" v-model="departmentList.score"></el-input>
        </el-form-item>
        <el-form-item label="考核名称" :label-width="formLabelWidth">
          <el-input style="width:70%" v-model="departmentList.name"></el-input>
        </el-form-item>
        <el-form-item label="年度" :label-width="formLabelWidth">
          <el-input style="width:70%" v-model="departmentList.year" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="closeTargets('ruleForm')"
          style="
             background-color: rgba(213, 215, 220);
              height: 30px;
            line-height: 5px;
              "
        >取 消</el-button>
        <el-button
          type="primary"
          @click="addTargets('ruleForm')"
          style="
           background-color: rgb(76 106 248);
          height: 30px;
             line-height: 5px;
              "
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  userOneStep,
  getUserId,
  deleteBUmen,
  deleteAllBUmen,
  Querydepartment,
  beforeUploadlist,
  editManagement,
  editMoney
} from "@/api2/kaohe"; //
import oneStep from "./components/oneStep.vue";
import lookStep from "./components/lookStep.vue";
export default {
  components: {
    oneStep: oneStep,
    lookStep: lookStep
  },
  data() {
    return {
      departmentList: {
        ranking: "",
        departmentName: "",
        score: "",
        name: "",
        year: "",
        id: ""
      },
      addTarget: false, //添加指标弹窗开关
      departments: [],
      ruleForm1: {
        nowtime: "",
        assessAdministratorUserId: ""
      },
      deletes: true,
      files: [],
      multipleSelectionDepartment: [], // 用于保存选中的行 //当前时间
      dataTypes: {},
      nameList: [],
      assessUserTypes: "",
      centerDialogVisible: false,
      looks: false,
      tableDatadialog: [], //表格数据
      createThree: false, //建立考核模板按钮的开关
      formLabelWidth: "78px", //label-width

      // 分页属性定义如下{
      pageNum: 1, //当前页
      total: 0, //总条数
      // tableData: [], //当前页码的表格数据
      pageSize: 10, //当前页容量
      // }
      path: [],
      //表格数据数组
      years: "",
      user: "",
      tableData: [],
      userList: []
    };
  },
  created() {
    this.nowtime();
    this.getUserIds();
    this.getUser();
    // this.getuserOneStep()
    // this.getList(); //获取表格数据
  },
  methods: {
    successBtn(e) {
      console.log(e);
    },
    sousuo() {
      if (
        this.ruleForm1.nowtime !== "" ||
        this.ruleForm1.assessAdministratorUserId !== ""
      ) {
        const params = {
          departmentName: this.ruleForm1.assessAdministratorUserId,
          year: this.ruleForm1.nowtime,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        Querydepartment(params)
          .then(res => {
            if (res.code == 0) {
              this.tableData = res.data.reverse();
              this.total = res.total; //总条数
            }
          })
          .catch(e => {
            console.log(e);
          });
      } else {
        this.getList();
      }
    },
    // 获取所有人员id
    async getUser() {
      const res = await userOneStep();
      // console.log(res);
      // this.departments = res.data.deptTreeList;
      // console.log(this.departments);
      let users = [];
      res.data.deptTreeList.forEach(item => {
        console.log(item);
        this.getTreePath(item.children, this.path);
      });
    },
    getTreePath(val, pushd) {
      val.forEach(item => {
        if (item.children) {
          pushd.push({ id: item.id, departmentName: item.label });
          item.children.forEach(data => {
            if (data.children) {
              pushd.push({ id: data.id, departmentName: data.label });
              this.getTreePath(data.children, pushd);
            } else {
              return;
            }
            // this.getTreePath(data, pushd);
          });
        } else {
          return;
        }
      });
      console.log(pushd);
      this.departments = pushd;
    },
    nowtime() {
      let nowDate = new Date();
      let date = {
        // 获取当前年份
        year: nowDate.getFullYear()
      };
      this.years = date.year;
    },
    //点击模板按钮触发a下载文件
    downloadTemplate() {
      this.$confirm("将下载考核模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let a = document.createElement("a");
          a.href = "./static/temeplete.xlsx";
          a.download = "部门考核模板.xlsx";
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 用于保存选中的行
    handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
      if (val) {
        this.deletes = false;
      } else {
        this.deletes = true;
      }
    },
    //编辑
    editRow(rows) {
      this.departmentList.id = rows.id;
      this.departmentList.ranking = rows.ranking;
      this.departmentList.departmentName = rows.departmentName;
      this.departmentList.score = rows.score;
      this.departmentList.name = rows.name;
      this.departmentList.year = rows.year;
      this.addTarget = true;
    },
    //编辑确定修改
    async addTargets(formName) {
      const jxDepartmentAssess = {
        id: this.departmentList.id,
        ranking: this.departmentList.ranking,
        departmentName: this.departmentList.departmentName,
        score: this.departmentList.score,
        name: this.departmentList.name,
        year: this.departmentList.year
      };
      console.log(jxDepartmentAssess);
      const res = await editManagement(jxDepartmentAssess);
      this.$message({
        message: "修改成功",
        type: "success"
      });
      this.sousuo();
      this.ruleForm = {
        assessorUserType: "", //被考核人类型
        departmentList: {
          ranking: "",
          departmentName: "",
          score: "",
          name: "",
          year: "",
          id: ""
        }
      };
      this.addTarget = false;
    },
    closeTargets() {
      this.addTarget = false;
      this.ruleForm = {
        assessorUserType: "", //被考核人类型
        departmentList: {
          ranking: "",
          departmentName: "",
          score: "",
          name: "",
          year: "",
          id: ""
        }
      };
    },
    // 批量删除
    deleteSelected() {
      this.$confirm("此操作将删除选中所有内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          let vals = this.multipleSelectionDepartment; //选中的值
          if (vals) {
            vals.map(item => {
              arr.push(item.id);
            });
          }
          const ids = { ids: arr.join() };
          deleteAllBUmen(ids).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              this.sousuo();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 上传考核部门
    upLoading() {
      console.log(this.files);
      if (this.files.name == "") {
        this.$message.warning("请选择要上传的文件！");
        return false;
      }
      let fileFormData = new FormData();
      let data = this.files;
      fileFormData.append("file", data); //  注意'file'要和后端统一
      let headers = {
        "Content-Type": "multipart/form-data" // 设置请求头
      };
      beforeUploadlist(fileFormData, headers)
        .then(res => {
          console.log(res);
          this.$message.success(res.msg);
          const params = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          };
          this.getList(params); // 刷新列表
        })
        .catch(e => {
          this.$message.error("上传失败，请重新上传");
        });
    },
    //导入表格----------------------------------------------------------------------------------------------
    beforeUpload(file) {
      this.files = file;
      this.upLoading();
      return false; //  取消默认上传
    },
    closehandleSubmit() {
      this.createThree = false;
    },

    // 表格内删除按钮的点击事件
    deleteRow(rows) {
      const id = rows.id;
      console.log(rows.id.toString());
      this.$confirm("此操作将删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          console.log(id);
          deleteBUmen(id).then(res => {
            if (res.data === true) {
              this.$message.success("删除成功");
              const totalPage = Math.ceil((this.total - 1) / this.pageSize);
              // 记住删除最后一条数据时当前码是最后一页
              const pageNums =
                this.pageNum > totalPage ? totalPage : this.pageNum;
              // 重新记录当前页码
              this.pageNum = pageNums < 1 ? 1 : pageNums;
              //删除成功 回调列表接口
              this.sousuo();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //分页逻辑{
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    //获取用户基本信息
    getUserIds() {
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              this.user = res.data.departmentName;
              this.getList(res.data.departmentName, res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
    },
    //获取表格数据
    getList(departmentNames, val) {
      console.log(departmentNames);
      const params = {
        year: this.years,
        // departmentName: departmentNames,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      Querydepartment(params)
        .then(res => {
          this.tableData = res.data.reverse();
          // this.user = departmentNames;
          this.total = res.total; //总条数
        })
        .catch(e => {
          console.log(e);
        });
    }
    //分页逻辑}
  }
};
</script>
  
  <style lang="scss" scoped>
.app-container {
  height: 100%;
  background-color: #f4f5fc;
}

.createMUban {
  display: inline-flex;
  align-items: center;
}
/* 共同样式 */
.add_dimension {
  color: blue;
}
.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;
  background-color: #0096fe;
}

::v-deep .el-input__inner {
  /*width: 0;宽度为0隐藏*/
  height: 32px;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-dialog__header {
  background-color: #ecf1f9;
  border-radius: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep [data-v-125ad6e6] .el-step.is-horizontal .el-step__line {
  opacity: 0;
}

::v-deep .el-dialog__header {
  background-color: #ecf1f9;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>
  